<template>
  <el-form :model="formData" :label-width="formConfig.labelWidth" :rules="rules" ref="formEl" class="myForm">
    <el-form-item
      v-for="item in formColumn"
      :key="item.label"
      :label="item.label"
      :prop="item.fild"
      class="formi-tem"
      :style="{ width: item.width ? item.width : '100%' }"
    >
      <!-- 输入框 -->
      <el-input
        v-if="item.type === 1"
        v-model="formData[item.fild]"
        :placeholder="'请输入' + item.label"
        :disabled="item.disabled"
        :clearable="item.clearable"
      />
      <!-- 下拉选择 -->
      <el-select
        v-if="item.type === 2"
        v-model="formData[item.fild]"
        :placeholder="'请选择' + item.label"
        :disabled="item.disabled"
        :clearable="item.clearable"
        :multiple="item.multiple"
        @change="changeSelect(formData[item.fild], item)"
      >
        <el-option v-for="item2 in item.option" :key="item2.label" :label="item2.label" :value="item2.value" />
      </el-select>
      <span class="tip" v-if="item.tip">
        <el-tooltip class="item" effect="dark" :content="item.tip" placement="top">
          <Svg name="tip" size="14"></Svg>
        </el-tooltip>
      </span>
      <!-- 下拉选择带虚拟滚动 -->
      <el-select-v2
        v-if="item.type === 21"
        v-model="formData[item.fild]"
        :placeholder="'请选择' + item.label"
        :options="item.option"
        :clearable="item.clearable"
        @change="changeSelect(formData[item.fild], item)"
      >
      </el-select-v2>
      <span class="tip" v-if="item.tip">
        <el-tooltip class="item" effect="dark" :content="item.tip" placement="top">
          <Svg name="tip" size="14"></Svg>
        </el-tooltip>
      </span>
      <!-- 文本框 -->
      <el-input
        v-if="item.type === 3"
        type="textarea"
        :rows="3"
        v-model="formData[item.fild]"
        :placeholder="'请输入' + item.label"
        :disabled="item.disabled"
        :clearable="item.clearable"
      />
      <!-- 时期时间选择 -->
      <el-date-picker
        v-if="item.type === 4"
        v-model="formData[item.fild]"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :value-format="item.valueFormat"
        :placeholder="'请输入' + item.label"
        :disabled="item.disabled"
        :clearable="item.clearable"
      />
      <!-- -1 插槽 -->
      <slot v-if="item.type === -1" name="formSlot" :item="item"></slot>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import Svg from '@/components/Svg.vue'
// 接受父组件数据
const prop = defineProps({
  formData: {
    type: Object,
    default: {}
  },
  formColumn: {
    type: Array,
    default: []
  },
  formConfig: {
    type: Object,
    default: {}
  },
  formRules: {
    type: Object,
    default: {}
  }
})

const rules = computed(() => {
  const obj = reactive({})
  prop.formColumn.forEach((item) => {
    if (item.rule) {
      const key = item.fild
      const rule = item.rule
      obj[key] = rule
    }
  })
  return obj
})
const onSubmit = () => {}
// 子组件通过事件向父组件传值
const emit = defineEmits(['chengSelect'])
const changeSelect = (val, item) => {
  emit('chengSelect', val, item)
}
const formEl = ref(null)
const checkForm = async () => {
  return formEl.value.validate((valid, fields) => {
    return valid
  })
}
const resetForm = () => {
  formEl.value.resetFields()
}
// 子组件向父组件暴露方法 或 数据变量用过ref 获取 或调用
defineExpose({ checkForm, resetForm })
</script>
<style scoped lang="scss">
.myForm {
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  ::v-deep(.el-select) {
    width: 100%;
  }
  .formi-tem {
    position: relative;
    .tip {
      position: absolute;
      right: -20px;
    }
  }
}
</style>
